<section class="container" data-page="coin-balance-history">
  <script defer src="<%= static_path(@conn, "/js/balance-chart-loader.js") %>"></script>

  <% is_proxy = SmartContractHelper.address_is_proxy?(@address) %>

  <%= render BlockScoutWeb.AddressView, "overview.html", address: @address, is_proxy: is_proxy, conn: @conn, exchange_rate: @exchange_rate, coin_balance_status: @coin_balance_status, counters_path: @counters_path, tags: @tags %>

  <section>
    <div class="card">
      <%= render BlockScoutWeb.AddressView, "_tabs.html", address: @address, is_proxy: is_proxy, conn: @conn %>
      <div class="card-body" data-async-listing="<%= @current_path %>">
        <%= render BlockScoutWeb.CommonComponentsView, "_channel_disconnected_message.html", text: gettext("Connection Lost, click to load newer blocks") %>

        <h2 class="card-title"><%= gettext "Balances" %></h2>

        <!-- Chart -->
        <div data-chart-loading-message class="tile tile-muted text-center mt-3 mb-4">
          <%= render BlockScoutWeb.CommonComponentsView, "_loading_spinner.html", loading_text: gettext("Loading chart...") %>
        </div>
        <button data-chart-error-message class="alert alert-danger col-12 text-left mb-4" style="display: none;">
          <span><%= gettext("There was a problem loading the chart.") %></span>
        </button>
        <div data-chart-container class="mb-4" style="display: none;">
          <canvas data-chart="coinBalanceHistoryChart" data-coin_balance_history_data_path="<%= AccessHelper.get_path(@conn, :address_coin_balance_by_day_path, :index, @address) %>" width="350" height="152"></canvas>
        </div>

        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>

        <div data-error-message class="alert alert-danger col-12 text-left" style="display: none; padding: 0.75rem 0rem; cursor: pointer;">
          <span href="#" class="alert alert-danger"><%= gettext("Something went wrong, click to reload.") %></span>
        </div>

        <div data-empty-response-message style="display: none;">
          <div class="tile tile-muted text-center" data-selector="empty-coin-balances-list">
            <%= gettext "There is no coin history for this address." %>
          </div>
        </div>

        <div data-selector="coin-balances-list" data-items>
          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
        </div>

        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>

    </div>
    <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/address-coin-balances.js") %>"></script>
  </section>
</section>
